<template>
    <div class="my-1">
        <div class="w-full h-10 text-sm bg-green-200  rounded border-l-8 border-green-400" v-if="alert.type=='success'">
            <div class="text-red-600 flex items-center h-full ">
                <div class="flex-1">
                    <div class="text-green-600 font-bold  text-xs ">
                        <i class="el-icon-success text-md ml-2"></i>
                        <slot></slot>
                    </div>
                </div>
            </div>

        </div>
        <div class="w-full h-10 text-sm bg-yellow-200  rounded border-l-8 border-yellow-400"
             v-else-if="alert.type=='warning'">
            <div class="text-yellow-300 flex items-center h-full ">
                <div class="flex-1">
                    <div class="text-yellow-600 font-bold text-xs ">
                        <i class="el-icon-warning ml-2 text-md"></i>
                        <slot></slot>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full h-10 text-sm bg-red-200  rounded border-l-8 border-red-400" v-else>
            <div class="text-red-300 flex items-center h-full ">
                <div class="flex-1">
                    <div class="text-red-600 font-bold text-xs ">
                        <i class="el-icon-error ml-2 text-md"></i>
                        <slot></slot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['alert']
}
</script>

<style scoped>

</style>
